<template>
	<view class="ways">
	  <view class="way" @click="handleWays('home')">
		<image class="active" v-if="activeWay=='home'" src="/static/icon/home_a.png" mode="" />
		<image class="normal" v-else src="/static/icon/home.png" mode="" />
	  </view>
	  <view class="way" @click="handleWays('heart')">
		<image class="active" v-if="activeWay=='heart'" src="/static/icon/heart_a.png" mode="" />
		<image class="normal" v-else src="/static/icon/heart.png" mode="" />
	  </view>
	  <view class="way" @click="handleWays('matcher')">
		<image class="active" v-if="activeWay=='matcher'" src="/static/icon/match_a.png" mode="" />
		<image class="normal" v-else src="/static/icon/match.png" mode="" />
	  </view>
	  <view class="way" @click="handleWays('mine')">
		<image class="active" v-if="activeWay=='mine'" src="/static/icon/mine_a.png" mode="" />
		<image class="normal" v-else src="/static/icon/mine.png" mode="" />
	  </view>
	</view>
</template>

<script>
	export default {
		name:"TabBar",
		props:{
			activeWay: '',
		},
		data() {
			return {
				
			};
		},
		methods:{
			 handleWays(type){
			  if(!uni.getStorageSync('token')&&type!='matcher'&&
			  type!='home'){
				uni.redirectTo({
				  url: '/pages/userInfo/loginWay/loginWay'
				})
				return
			  }
			  getApp().globalData.currentMenu = type
			  if(type=='home'){
				uni.redirectTo({
				  url: '/pages/tabPage/home/home'
				})
			  }else if(type=='heart'){
				uni.redirectTo({
				  url: '/pages/tabPage/heart/heart'
				})
			  }else if(type=='matcher'){
				uni.redirectTo({
				  url: '/pages/tabPage/matcher/matcher'
				})
			  }else if(type=='mine'){
				uni.redirectTo({
				  url: '/pages/tabPage/mine/mine'
				})
			  }
			},
		}
	}
</script>

<style lang="scss">
.ways{
  width: 100%;
  box-sizing: border-box;
  position:fixed;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 5%;
  justify-content: space-around;
  border-radius: 40rpx;
  height: 100rpx;
  margin-top: 80rpx;
  // background-color: red;
  .way{
    // background-color: rgb(170, 57, 57);
    // width: 25%;
    text-align: center;
    flex: 1;
    .active{
      width: 96rpx;
      height: 112rpx;
      margin-bottom: 100rpx;
    }
    .normal{
      width: 49rpx;
      height: 48rpx;
      margin-bottom: 40rpx;
    }
  }
}
</style>